<template>
  <div class="my-wallet">
    <!-- <navbar :title="'我的钱包'"></navbar> -->
    <div class="tabbar">
      <tabs v-model="active" color="#283C79" @change="onTabsChange">
        <tab title="余额"></tab>
        <tab title="货款"></tab>
      </tabs>
    </div>

    <div class="total-balance total" v-if="active == 0">
      <div>
        <p>
          <span class="now">当前余额</span>
          <span>￥{{agentInfo.balance}}</span>
        </p>
        <p>
          <span>保证金</span>
          <span class="cash">￥{{agentInfo.cash ? agentInfo.cash : '0.00'}}</span>
        </p>
      </div>
      <div class="btn">
        <van-button type="info" size="small" @click="goToWithdraw">提现</van-button>
      </div>
    </div>

    <div class="total-loan total" v-if="active == 1">
      <div>
        <p>
          <span class="now">当前货款</span>
          <span>￥{{agentInfo.goods_money}}</span>
        </p>
      </div>
      <div class="btn">
        <van-button type="info" size="small" @click="goToRecharge">充值</van-button>
      </div>
    </div>

    <div class="records">
      <div class="records-header">
        <p>{{active == 0 ? '余额' : '货款'}}记录</p>
        <!-- <p @click="goToRecords">
          <span>更多</span>
          <icon name="arrow" />
        </p>-->
      </div>
      <div class="records-list">
        <list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          ref="loadList"
        >
          <div class="record-item" v-for="(item,index) in allList" :key="index">
            <record-item :recordTime="item.createTime" :recordName="item.type">
              <div class="loan-info" slot="content">
                <p class="price">
                  <span>金额：</span>
                  <span
                    :class="{'price-down': item.addOrDel == '-', 'price-up': item.addOrDel == '+'}"
                  >{{item.addOrDel}}￥{{item.money}}</span>
                </p>
                <p class="order-numer">
                  <!-- <span>{{item.orderNum ? '流水号：'}}</span> -->
                  <span v-if="item.orderNum">{{'订单号：'+item.orderNum}}</span>
                  <span v-else>{{'流水号：'+item.number}}</span>
                </p>
              </div>
            </record-item>
          </div>
        </list>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Button, List, Icon } from "vant";
import recordItem from "../components/record_item.vue";
import navbar from "../components/navbar.vue";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";

export default {
  components: {
    Tab,
    Tabs,
    vanButton: Button,
    recordItem,
    navbar,
    List,
    Icon
  },
  data() {
    return {
      agentInfo: {},
      active: Number(localStorage.getItem("tabbarIndex")) || "0",
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      httpList: {
        0: urls.GJQDYE,
        1: urls.GJQDHK
      },
      allList: []
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/home/my") {
      localStorage.removeItem("tabbarIndex");
    }
    next();
  },
  mounted() {
    this.getAgentInfo();
    this.onLoad();
  },
  methods: {
    onTabsChange(index) {
      this.active = index;
      localStorage.setItem("tabbarIndex", this.active);

      this.pageNumber = 1;
      this.allList = [];
      this.loading = false;
      this.finished = false;

      this.onLoad();
    },

    // 获取余额提现列表  和  货款充值列表
    onLoad() {
      let option = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        id: this.userInfo.id
      };

      // if (this.selectedAgencyLevel.id != 0) {
      //   option = Object.assign({}, option, {
      //     agencyLevel: this.selectedAgencyLevel.id
      //   });
      // }

      http.post(this.httpList[this.active], option).then(res => {
        if (res.data.code == 200) {
          // console.log(res.data.data);
          this.allList = this.allList.concat(res.data.data.rows);
          this.pageNumber++;

          // console.log("继续加载");
          // this.finished = true;
          this.loading = false;

          // this.onLoad()
        }
        if (res.data.code == 300) {
          // console.log("加载成功");
          this.loading = false;
          this.finished = true;
        }
      });
    },

    // 获取用户信息（获取用户 余额 和 货款）
    getAgentInfo() {
      http
        .post(urls.DLXQ, {
          id: this.userInfo.id
        })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.agentInfo = data;
          }
        });
    },
    // 跳转到更多记录
    goToRecords() {
      let path = "";
      if (this.active == 0) {
        path = "/withdraw_records";
      } else {
        path = "/goods_recharge_records";
      }
      this.$router.push({
        path: path
      });
    },

    // 跳转到提现页面
    goToWithdraw() {
      this.$router.push({
        path: "/balance_withdraw"
      });
    },
    // 跳转到充值页面
    goToRecharge() {
      this.$router.push({
        path: "/goods_recharge"
      });
    }
  }
};
</script>

<style scoped>
.my-wallet {
  height: 100%;
}

.total-balance,
.total-loan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #fff;
  margin-top: 5px;
}

.total > div >p {
  display: flex;
  align-items: center;
}

.total > div >p:last-child{
  margin-top: 5px;
}

.total-balance > div:first-child > p:first-child,
.total-loan > div:first-child > p:first-child{
  font-size: 1.5rem;
  color: var(--money-up);
}

.total-balance > div:first-child > p:last-child > span:last-child {
  color: var(--money-up);
}

.now {
  font-size: 1rem;
  color: #868387;
  margin-right: 5px;
}

.cash {
  padding-left: 5px;
}

.records {
  height: calc(100%);
  /* overflow: hidden; */
}

.records-list {
  max-height: calc(100% - 42px - 5px);
  overflow: scroll;
}

.record-item {
  background-color: #fff;
  margin-top: 2px;
}

.records-header {
  text-align: left;
  padding: 10px 15px;
  background-color: #fff;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}

.records-header p {
  display: flex;
  align-items: center;
}

.loan-info {
  padding: 0 15px 10px 15px;
}

.loan-info > p {
  text-align: left;
}
</style>

<style>
.my-wallet .btn .van-button--info {
  border-radius: 20px !important;
}
</style>